<template>
  <div>
    <h1>v-for</h1>
    <ul id="example-1">
      <li v-for="item in items" :key="item.message">
        {{ item.message }}
      </li>
    </ul>
    <ul id="example-2">
      <li v-for="(item, index) in items" :key="index" >
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul>
    <ul id="v-for-object" class="demo">
      <li v-for="value in object" :key="value"  >
        {{ value }}
      </li>
    </ul>
    <div v-for="(value, name, index) in object" :key="index">
      {{ index }}. {{ name }}: {{ value }}
    </div>
    <!-- v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。 -->
    <span v-for="n in 10"  :key="n" >{{ n }} </span>
    <!-- 利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。 -->
    <ul>
      <template v-for="item in items"  >
        <li :key="item.msg" >{{ item.msg }}</li>
        <li :key="item.msg+'divider'" class="divider" role="presentation"></li>
      </template>
    </ul>
    <!-- v-for 与 v-if 一同使用
    v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，
     -->
    <li v-for="(item, index) in items" :key="index" >
      {{ item.message }}
    </li>
    <!--Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse() -->
  </div>
</template>

<script>
export default {
  name: 'chp-02',
  data () {
    return {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>
